<template>
	<!-- #ifdef MP-WEIXIN -->
	<uv-navbar
	  :fixed="false"
	  :title="title"
	  left-arrow
	  @leftClick="$onClickLeft"
	/>
	<!-- #endif -->
	<view>
		<view class="card flex content-center justify-between">
			<view class="">
				提现至
			</view>
			<view class="flex content-center " style="padding: 10rpx 0 0;box-sizing: border-box;" @click="setshow">
				<!-- <image src="../static/icon13.png" mode=""></image> -->
				<view class="" style="line-height: 30rpx;margin: 0 10rpx;" v-if='list.length!==0'>
					{{bankName}}({{lastfour(bankCode)}})
				</view>
				<view class="" style="line-height: 30rpx;margin: 0 10rpx;font-size: 26rpx;" v-else>
					请选择
				</view>
				<view class="">
					<uv-icon name="arrow-right" size="18"></uv-icon>
				</view>
			</view>
		</view>
		<view class="card_one">
			<view class="top">
				提现金额
			</view>
			<view class="center flex content-center justify-between">
				<view class="flex content-center">
					<text class="one">￥</text>
					<input class="two" v-model="amount" type="number" placeholder="请输入金额">
				</view>
				<view class="thr" @click="selectMony">
					全部提现
				</view>
			</view>
			<view class="bom">
				可提现金额 ￥ {{merchartShop.balance}}
			</view>
		</view>
		<view class="qrBtn" @click="goDrawal">
			确认提现
		</view>
		<view class="content">
			温馨提示: 提现申请发起后,预计在10个工作日内到账。
		</view>

		<uv-popup  ref="popup" mode="bottom">
			<view>
				<view class="popTitle flex content-center justify-between">
					<view class=""></view>
					<view class="">请选择提现账号</view>
					<view class="" @click="gopage('/pages/components/pages/merchant/addCard')">添加</view>
				</view>
				<scroll-view scroll-y="true" style="height: 650rpx;">
					<view class="" v-if="list.length!==0">
						<view class="popItem flex content-center justify-between align-center" v-for="(item,i) in list" :key="i"
							@click="selectCard(item.id,item.bankName,item.bankCode)">
							<view class="left flex content-center">
								<image class='img' src="/static/images/merchant/bank.svg" mode="aspectFill"></image>
								<view class="">
									<view class="name">
										{{item.bankName}}({{lastfour(item.bankCode)}})
									</view>
								</view>
							</view>
							<view class="right">
								<uv-radio-group v-model="checking">
									<uv-radio  activeColor="red" label="" :name="item.id"></uv-radio>
								</uv-radio-group>
							</view>
						</view>
					</view>
					<view class="" v-else>
						<uv-empty mode="list"></uv-empty>
					</view>
				</scroll-view>

			</view>
		</uv-popup>
	</view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
	getCards,
	addWith
} from '@/api/merchant'
import { onLoad} from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { storeToRefs } from 'pinia'
import { lastfour } from '@/utils/util'
const main = useMainStore()
const { merchartShop } = storeToRefs(main)
const title = ref('提现')
const bankId = ref(0)
const bankName = ref('')
const bankCode = ref('')
const list = ref([])
const amount = ref(0)
const popup = ref()

onLoad(() => {
	getList()
})

const gopage = (url) =>{
	popup.value.close()
	uni.navigateTo({
		url
	})
	

}


const getList  = async() => {
	let res = await getCards({shopId:merchartShop.value.id})
	if(res){
		list.value = res
		if(res.length > 0){
			bankId.value= res[0].id
			bankName.value = res[0].bankName
			bankCode.value = res[0].bankCode
		}
		
	}
}

const setshow = () => {
	popup.value.open()
	getList()
}

const selectCard = (id, name, code) =>{
	bankId.value= id 
	bankName.value = name
	bankCode.value = code
	
	popup.value.close()
	
}

const selectMony = () => {
	amount.value = merchartShop.value.balance
}

const goDrawal = async() => {
	if (amount == '' || amount <= 0) {
		uni.showToast({
			title: '没有可提现金额',
			icon: 'error'
		})
		return
	}
	let res = await addWith({shopId:merchartShop.value.id,bankId:bankId.value,amount:amount.value});
	if(res){
		uni.navigateBack()
	}
}


</script>

<style lang="scss">
	.add {
		padding: 34rpx 40rpx;
		box-sizing: border-box;
		margin-right: 20rpx;
		border-top: 1rpx solid #E4E4E4;

		.left {
			line-height: 90rpx;

			image {
				width: 90rpx;
				height: 90rpx;
			}
		}
	}

	.popItem {
		padding: 24rpx 40rpx;
		box-sizing: border-box;
		margin-right: 20rpx;
		border-top: 1rpx solid #f3f3f3;

		.head {
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-right: 14rpx;
		}

		.left {
			.name {
				font-size: 32rpx;
				color: #333333;
				margin: 0 0 10rpx 20rpx;
				line-height: 80rpx;
			}

			.img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #f5f5f5;
				text-align: center;
				line-height: 80rpx;
			}

			.phone {
				font-size: 28rpx;
				color: #777777;
			}
		}

	}

	.popTitle {
		text-align: center;
		margin: 40rpx 0;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	page {
		background: #FAFAFA;
	}

	.qrBtn {
		width: 700rpx;
		height: 98rpx;
		background: #09b4f1;
		border-radius: 14rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 60rpx auto 40rpx;
	}

	.content {
		width: 100%;
		text-align: center;
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #AAAAAA;
		line-height: 33rpx;
		letter-spacing: 1px;
		margin: 0 auto;
	}


	.card {
		width: 700rpx;
		height: 122rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 20rpx auto;
		padding: 40rpx 24rpx;
		box-sizing: border-box;

		image {
			width: 30rpx;
			height: 30rpx;
		}

	}

	.card_one {
		width: 700rpx;
		height: 296rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		padding: 32rpx 25rpx;
		box-sizing: border-box;

		.top {
			font-size: 28rpx;
			color: #2F3337;
		}

		.center {
			border-bottom: 1rpx solid #EBEBEB;
			padding: 22rpx 0;
			box-sizing: border-box;
			margin: 30rpx 0;

			.one {
				font-size: 40rpx;
				color: #2F3337;
				margin-right: 16rpx;
			}

			.two {
				width: 300rpx;
				height: 50rpx;
				font-size: 48rpx;
				color: #2F3337;
			}

			.thr {
				font-size: 26rpx;
				color: #00ABFF;
				margin-top: 10rpx;
			}
		}

		.bom {
			font-size: 24rpx;
			color: #777777;
		}
	}
</style>
